<template>
  <view>
    <view class="container" >
      <image :src="imageUrl + '/yunzhanguan/yunzhanguanimage-49603.png'" class="beijing"></image>
      <view class="logo-container">
        <view class="vertical-container">
          <view class="vertical-item">云上·展馆</view>
        </view>
        <!-- 横向排列的容器 -->
        <view class="horizontal-container">
          <view class="horizontal-item-1">
            <view class="horizontal-text" @click="jump">查 看 更 多</view>
            <view class="horizontal-logo">
              <image :src="imageUrl + '/yunzhanguan/yunzhanguanGroup-899.png'" style="height: 100%; width: 100%;"></image>
            </view>
          </view>
		  <litiswipoer />
          <!-- 替换为轮播图 -->
         <!-- <swiper class="swiper-container" ref="swiper" :current="currentSwiperIndex" @change="swiperChange" display-multiple-items="3" circular="true">
            <swiper-item style="overflow: visible;">
              <image :style="{ marginLeft: getMarginLeft(0), marginTop: getMarginTop(0), width: getWidth(0), height: getHeight(0) }"
                src='https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/Group907.png' mode="aspectFill" class="swiper-item-1">
              </image>
              <view class="vertical-text" :style="{ fontSize: getTitleFontSize(0), marginTop: getTitleMarginTop(0), marginLeft: getTitleMarginLeft(0) }">
                靖港云展厅
              </view>
            </swiper-item>
            <swiper-item style="overflow: visible;">
              <image :style="{ marginLeft: getMarginLeft(1), marginTop: getMarginTop(1), width: getWidth(1), height: getHeight(1) }"
                src='https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/Group1503-1.png' mode="aspectFill" class="swiper-item-2">
              </image>
              <view class="vertical-text" :style="{ fontSize: getTitleFontSize(1), marginTop: getTitleMarginTop(1), marginLeft: getTitleMarginLeft(1) }">
                靖港云展厅
              </view>
            </swiper-item>
            <swiper-item style="overflow: visible;">
              <image :style="{ marginLeft: getMarginLeft(2), marginTop: getMarginTop(2), width: getWidth(2), height: getHeight(2) }"
                src='https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanFrame-13141.png' mode="aspectFill" class="swiper-item-3">
              </image>
              <view class="vertical-text" :style="{ fontSize: getTitleFontSize(2), marginTop: getTitleMarginTop(2), marginLeft: getTitleMarginLeft(2) }">
                新场云展馆
              </view>
            </swiper-item>
            <swiper-item style="overflow: visible;">
              <image :style="{ marginLeft: getMarginLeft(0), marginTop: getMarginTop(0), width: getWidth(0), height: getHeight(0) }"
                src='https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/Group907.png' mode="aspectFill" class="swiper-item-1">
              </image>
              <view class="vertical-text" :style="{ fontSize: getTitleFontSize(0), marginTop: getTitleMarginTop(0), marginLeft: getTitleMarginLeft(0)}">
                靖港云展厅
              </view>
            </swiper-item>
            <swiper-item style="overflow: visible;">
              <image :style="{ marginLeft: getMarginLeft(1), marginTop: getMarginTop(1), width: getWidth(1), height: getHeight(1) }"
                src='https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/Group1503-1.png' mode="aspectFill" class="swiper-item-2">
              </image>
              <view class="vertical-text" :style="{ fontSize: getTitleFontSize(1), marginTop: getTitleMarginTop(1), marginLeft: getTitleMarginLeft(1) }">
                靖港云展厅
              </view>
            </swiper-item>
            <swiper-item style="overflow: visible;">
              <image :style="{ marginLeft: getMarginLeft(2), marginTop: getMarginTop(2), width: getWidth(2), height: getHeight(2) }"
                src='https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanFrame-13141.png' mode="aspectFill" class="swiper-item-3">
              </image>
              <view class="vertical-text" :style="{ fontSize: getTitleFontSize(2), marginTop: getTitleMarginTop(2), marginLeft: getTitleMarginLeft(2) }">
                新场云展馆
              </view>
            </swiper-item>
          </swiper> -->
        </view>
      </view>
      <view class="dibucontainer">
        <view class="daohang">
          <!-- <image :src="imageUrl + '/xiaoniao.png'"  mode="aspectFill" style="width: 160.31rpx; height: 159.51rpx;" @click="hader"></image> -->
        </view>
        <view class="jianto">
          <image :src="imageUrl + '/images/imagesGroup-788.png'" mode="aspectFill" style="width: 40.01rpx; height: 40.01rpx;" :class="{ 'arrow-fade': true }">
          </image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import litiswipoer from '../../../common/swiper/shiyan.vue'
export default {
  components:{
	litiswipoer  
  },
  data() {
    return {
      imageUrl: this.$imageUrl,
      touchStartX: 0,
      touchStartY: 0,
      startY: 0,
      isTouching: false,
      currentSwiperIndex: 0
    };
  },
  methods: {
    jump() {
      console.log('点击按钮触发,跳转页面');
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const currentPath = currentPage.route;
      console.log('即将跳转到的页面路径：/pages-online-cloud/list-of-cloud-exhibition/list of cloud exhibition halls，传递的当前页面路径参数为：', currentPath);
      wx.redirectTo({
        url: `/pages-online-cloud/list-of-cloud-exhibition/list of cloud exhibition halls?fromPage=${currentPath}`
      });
    },
    hader() {
      wx.redirectTo({
        url: '/pages-guide/guide',
      })
    },
    swiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
      // 更新图片大小
      this.updateImageSizes();
    },
    updateImageSizes() {
      if (!this.$refs.swiper) return; // 如果 swiper 没有被渲染，直接返回
      const swiper = this.$refs.swiper.swiper;
      for (let i = 0; i < 6; i++) {
        const width = this.getWidth(i);
        const height = this.getHeight(i);
        const marginLeft = this.getMarginLeft(i);
        const marginTop = this.getMarginTop(i);
        const swiperItem = swiper.slides[i]; // 直接访问 swiper-item
        if (swiperItem) {
          swiperItem.style.width = width;
          swiperItem.style.height = height;
          swiperItem.style.marginLeft = marginLeft;
          swiperItem.style.marginTop = marginTop;
        }
      }
    },
    getWidth(index) {
      if (this.currentSwiperIndex === index) {
        return '112rpx';
      } else if ((this.currentSwiperIndex + 1) % 3 === index) {
        return '150rpx';
      } else if ((this.currentSwiperIndex - 1 + 3) % 3 === index) {
        return '231rpx';
      } else {
        return '112rpx';
      }
    },
    getHeight(index) {
      if (this.currentSwiperIndex === index) {
        return '464rpx';
      } else if ((this.currentSwiperIndex + 1) % 3 === index) {
        return '628rpx';
      } else if ((this.currentSwiperIndex - 1 + 3) % 3 === index) {
        return '989rpx';
      } else {
        return '464rpx';
      }
    },
    getMarginLeft(index) {
      if (this.currentSwiperIndex === index) {
        return '0';
      } else if ((this.currentSwiperIndex + 1) % 3 === index) {
        return '-8vw';
      } else if ((this.currentSwiperIndex - 1 + 3) % 3 === index) {
        return '-10vw';
      } else {
        return '0';
      }
    },
    getMarginTop(index) {
      if (this.currentSwiperIndex === index) {
        return '16vh';
      } else if ((this.currentSwiperIndex + 1) % 3 === index) {
        return '10vh';
      } else if ((this.currentSwiperIndex - 1 + 3) % 3 === index) {
        return '0';
      } else {
        return '16vh';
      }
    },
    getTitleFontSize(index) {
      if (this.currentSwiperIndex === index) {
        return '40rpx';
      } else if ((this.currentSwiperIndex + 1) % 3 === index) {
        return '40rpx';
      } else if ((this.currentSwiperIndex - 1 + 3) % 3 === index) {
        return '48rpx';
      } else {
        return '40rpx';
      }
    },
    getTitleMarginTop(index) {
      if (this.currentSwiperIndex === index) {
        return '15vh';
      } else if ((this.currentSwiperIndex + 1) % 3 === index) {
        return '8vh';
      } else if ((this.currentSwiperIndex - 1 + 3) % 3 === index) {
        return '1vh';
      } else {
        return '15vh';
      }
    },
    getTitleMarginLeft(index) {
      console.log('currentSwiperIndex:', this.currentSwiperIndex, 'index:', index);
      if (this.currentSwiperIndex === index) {
        return '-3vw';
      } else if ((this.currentSwiperIndex + 1) % 3 === index) {
        return '-10vw';
      } else if ((this.currentSwiperIndex - 1 + 3) % 3 === index) {
        return '-10vw';
      } else {
        return '-3vw';
      }
    }
  }
}
</script>


<style scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #E4EBE9 ;
}
.beijing{
    z-index: 1;
    height: 100%;
    width: 100%;
}
.logo-container{
    z-index: 2;
    position: absolute;
    height: 80vh;
    width: 100%;
    margin-top: 92rpx;
    display: flex;
    flex-direction: column;
}
.vertical-container {
  display: flex;
  flex-direction: column;
  width: 25vw;
  height: 48rpx;
  margin-top: 13%;
  margin-left: 4%;
}
.vertical-item{
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 36rpx;
    color: #3F5649;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
}
.horizontal-container {
  display: flex;
}
.horizontal-item-1{
    display: flex;
    flex-direction: column;
    height: auto;
    width: auto;
    margin-left: 10%;
    margin-top: 428rpx;
}
.horizontal-text{
    width: 26rpx;
    height: 160rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 26rpx;
    color: #3F5649;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.horizontal-logo{
    height: 28.8rpx;
    width: 28.8rpx;
}
.dibucontainer{
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 20%;
    top: 79%;
}
.daohang{
      margin-top: 4.5vh;
      z-index: 4;
      height: 159rpx;
      width: 160rpx;
      margin-left: 77%;
    
}
.jianto{
    margin-top: 1vh;
    margin-left: 47%;
    margin-bottom: 120rpx;
}
@keyframes arrowFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.arrow-fade {
  animation: arrowFade 1.5s infinite;
}
.swiper-container{
    display: flex;
    width: 100vw;
    height: 1000rpx;
    margin-left: 50rpx;
}
.swiper-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}
.vertical-text {
     position: absolute;
     z-index: 2;
     width: 55rpx;
     height: 440rpx;
	 letter-spacing: 15rpx;
     font-size: 48rpx;
     color: #FFFFFF;
     font-weight: 500;
     line-height: 56rpx;
     writing-mode: vertical-lr;
     text-orientation: upright;
     font-family: Source Han Sans CN, Source Han Sans CN;
     top: 30%;
     left: 30%;
     transform: translate(-50%, -50%);
   }
   image {
     transition: width 1s ease, height 1s ease;
   }
</style>